import React from 'react';
import './index.less';
import { Button, ProgressBar, WaterMark } from 'antd-mobile';
export default function Cticket(props: {
  _id: any;
  good: any;
  price: Number;
  type: String;
  done: Boolean;
  desc: String;
  num: Number;
  setDone: any;
}) {
  function updone(id) {
    console.log(id, '子组件传递');
    props.setDone(id);
  }
  return (
    <div className="cticket">
      <div className="cleft">
        <img src={props.good.imgs} alt="" />
        <div className="desc">
          <p>{props.good.name}</p>
          <p>{props.desc}</p>
          <p>
            券后价￥<span>{(props.good.price - props.price).toFixed(1)}</span>
          </p>
        </div>
        <div className="pro">
          <ProgressBar
            percent={props.num}
            text={'券已抢' + props.num + '%'}
            style={{ '--fill-color': 'rgb(227,67,58)' }}
          />
        </div>
      </div>
      <div className="cright">
        <div className="up">
          <p>
            ￥<span>{props.price}</span>
          </p>
          {props.type == '无门槛' ? <p>无门槛</p> : <p>满{props.type}可用</p>}
          <Button
            color="danger"
            size="mini"
            className={props.done ? 'btn1' : 'btn'}
            onClick={() => {
              updone(props._id);
            }}
          >
            {props.done ? '已领取' : '立即领取'}
          </Button>
        </div>
        {props.done ? (
          <div className="watermark">
            <WaterMark
              content={'已领取'}
              gapX={30}
              gapY={20}
              height={55}
              width={55}
              fullPage={false}
              rotate={45}
              fontColor={'rgb(222,222,222)'}
            />
          </div>
        ) : (
          ''
        )}
      </div>
    </div>
  );
}
